import React, { useState, forwardRef, useImperativeHandle } from 'react';
import { Modal, Input, Radio, message } from 'antd';
// 导入接口user.js中
import { adduserFn,edituserFn } from '@/api/user';

const Mymodal = forwardRef((props, ref) => {
	const [isModalOpen, setIsModalOpen] = useState(false);
	// 修改受控组件
	const [currentUser, setCurrentUser] = useState({})

	const onChange = (key, e) => {
		console.log('radio checked', e.target.value);
		console.log('key', key);
		currentUser[key] = e.target.value
		setCurrentUser({ ...currentUser });
		console.log('currentUser', currentUser);
	};

	const showModal = () => {
		setIsModalOpen(true);
	};
	// 点击确认按钮
	const handleOk = () => {
		setIsModalOpen(false);
		console.log('currentUser',currentUser);
		if(title === '添加'){
			// 调用添加用户接口

			adduserFn(currentUser).then((res) => {
				// console.log('adduser', res);
				if (res.data.errNo === 0) {
					// 说明添加用户成功
					// 提示
					message.success('添加成功！', 1, () => {
						// 重新请求最新用户
						props.getuserlistFn({ page: props.page })
						// 清空输入历史
						setCurrentUser({})
					})
				}else{
					message.error(res.data.errText, 1)
					// 清空输入历史
					setCurrentUser({})
				}
			})
		}else if(title==='编辑'){
			// 调用编辑用户接口
			edituserFn(currentUser).then((res)=>{
				console.log('修改',res);
				if (res.data.errNo === 0) {
					// 说明编辑成功
					// 提示
					message.success('编辑成功', 1, () => {
						// 重新请求最新用户
						props.getuserlistFn({ page: props.page })
						// 清空输入历史
						setCurrentUser({})
					})
				}else{
					message.error(res.data.errText,1)
					// 清空输入历史
					setCurrentUser({})
				}
			})
		}
		
	};

	const handleCancel = () => {
		setIsModalOpen(false);
		// 清空输入历史
		setCurrentUser({})
	};

	// 使用 useImperativeHandle 抛出当前函数组件上的数据和方法
	useImperativeHandle(ref, () => {
		return {
			isModalOpen,	//是否显示模态框
			showModal,		// 控制显示和隐藏模态框的方法
			setTitle,	// 修改模态框标题方法
			setCurrentUser,  // 修改当前模态框的信息
		}
	})


	// 定义模态框的标题
	const [title,setTitle] = useState('')
	return (
		<>
			<Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
				<p>
					<Input placeholder="用户名" value={currentUser.username} onChange={((e) => onChange('username', e))} />
				</p>
				<p>
					<Input placeholder="密码" value={currentUser.password} onChange={((e) => onChange('password', e))} />
				</p>
				<p>
					<Input placeholder="手机号" value={currentUser.mobile} onChange={((e) => onChange('mobile', e))} />
				</p>
				<div>
					<Radio.Group value={currentUser.gender} defaultChecked={true} onChange={((e) => onChange('gender', e))}>
						<Radio value='1'>男</Radio>
						<Radio value='2'>女</Radio>
						<Radio value='3'>保密</Radio>
					</Radio.Group>
				</div>
				<p>
					<Input placeholder="邮箱" value={currentUser.email} onChange={((e) => onChange('email', e))} />
				</p>
			</Modal>
		</>
	);
})

export default Mymodal;
